<template>
    <!--导航开始-->
    <header>
        <div class="top">
            <div class="top-left">
                <!--logo部分css 在public.css中-->
                <div class="logo">
                    <a href="/">
                        <img src="../../../static/front-vue/images/bloglogo_yuan.png"/>
                    </a>
                </div>
                <!--滚动消息，在showtip.js中对滚动进行设置-->
                <div class="web-xiaoxi">
                    <i class="el-speaker"></i>
                    <ul class="mulitline">
                        <li v-for="notice in noticeList" :key="notice.noticeId">{{notice.noticeTitle}}</li>                        
                    </ul>
                </div>
                <!--手机菜单按钮-->
                <div class="mobile-nav"><i class="el-lines"></i><i class="el-remove"></i></div>
            </div>
            <!--电脑导航开始-->
            <nav class="mynav">
                <!-- css在public.css中 -->
                <ul class="orange-text">
                    <li class="">
                        <router-link :to="{name:'Main'}">首页</router-link>
                    </li>
                    <li class='drop'>
                        <a href="JavaScript:;">分类<i class='el-chevron-down'></i></a>
                        <div class="drop-nav orange-text ">
                            <ul>
                                <li v-for="category in categoriesList" :key="category.categoryId">
                                    <!-- 路由跳转传分类id -->
                                    <router-link :to="{name:'Blog_By_Category',query:{categoryId:category.categoryId}}">
                                        {{category.categoryTitle}}</router-link>                                                                                              
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li><router-link :to="{name:'Link'}">友情链接</router-link></li>
                    <li><router-link :to="{name:'LeaveComments'}">留言</router-link></li>
                    <li><router-link :to="{name:'About'}">关于我</router-link></li>
                    <li><router-link :to="{name:'Treasure'}">来看看哇</router-link></li>                   
                </ul>
                <!--移动的滑动-->
                <div class="move-bg"></div>
                <!--移动的滑动 end-->
            </nav>
            <!--登录-->
            <div class="vip" style="width: 4%;float: right;text-align: right;">
                <a  href="javascript:void" title="后台登录">
                    <img class="img-circle"
                        src="../../../static/front-vue/images/default_head_img.gif"
                        alt="后台登录" style="margin-top: 17px;">
                </a>
                          
            </div>
            <!--手机导航-->
            <div class="mob-menu">
                <!--手机下拉菜单-->
                <ul class="mob-ulnav">
                    <li><a href="/">首页</a></li>
                    <li class='mob-drop'>
                        <a href="javascrip:;">分类<i></i></a>
                        <ul class="mob-dropmenu">
                            <li>
                                <a href=""  text="分类1"></a>
                                <a href=""  text="分类2"></a>
                                <a href=""  text="分类3"></a>
                                <a href=""  text="分类4"></a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="">归档</a></li>
                    <li><a href="">友链</a></li>
                    <li><a href="">留言</a></li>
                    <li><a href="">关于</a></li>
                </ul>
            </div>
        </div>      
    </header>
    <!--导航结束-->
</template>

<script>
 import bootstrap from '../../../static/login/js/bootstrap.min.js';
 import common from '../../../static/login/js/common.js';
 import jquery2 from '../../../static/login/js/jquery2.2.2.min.js';

export default {
    name: 'myHeader',
    data() {
        return {
            //show_login_pop:false,
            noticeList:[],
            categoriesList:[]
        }
    },
    components: {
        
    },
    created: function() {
        this.loadInitialData();
    },
    methods:{
      

        //加载通知及分页信息
        loadInitialData () {
            var _this = this; 
                     
            this.$axios.get('/mainPage/header').then(resp => {
                if (resp && resp.status === 200) { 
                    //后台传map                   
                    _this.noticeList = resp.data.noticesList;   //notice
                    _this.categoriesList = resp.data.categories; //分类
                }	
            });

        }
        
    }
}
</script>

<style scoped>
    
</style>

